<template>
	<!-- 短信验证组件 -->
	<div class="sms-verification-box">
		<header>
			<img :src="headerLogo" alt=""><span>本场直播需手机验证观看</span>
		</header>
		<div class="content-box">
			<ul>
				<li class="phone-num">
					<input type="number" @focus="inputFocus" v-model="phoneNum" placeholder="请输入手机号码">
				</li>
				<li class="phone-ver">
					<input type="number" v-model="phoneCode" placeholder="请输入短信验证码">
					<p :class="grayClass" @click="clickGetVer">{{authcodetext}}</p>
				</li>
			</ul>
		</div>
		<div class="footer-btn" :class="footerBtnClass" @click="clickBtn" >
			确认
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			roomInfo: Object,
			videoInfo:Object,
			typeFrom:String,
		},
		data() {
			return {
				headerLogo: '',
				time_s:60,
				clearTime:"",
				switchState:true,
				authcodetext:'获取验证码',
				grayClass:'',
				phoneNum:'',
				phoneCode:'',
				footerBtnClass:''
			}
		},
		watch: {
			//改变按钮颜色
			phoneCode() {
				if (this.phoneCode) {
					const reg = /^1[3456789]\d{9}$/;
					 if (reg.test(this.phoneNum)) {
						 this.footerBtnClass= 'blue-footer-btn'
					}
					
				} else {
					this.footerBtnClass = ''
				}
			},
		},
		created() {
			//console.log("roomInfo", this.typeFrom)
			if(this.typeFrom=='live'){
				let {
					roomInfo: {
						userAnchor: {
							headImg
						}
					}
				} = this.roomInfo;
				this.headerLogo = headImg;
			}else{
				let {
					videoInfo: {
						userAnchor: {
							headImg
						}
					}
				} = this.videoInfo;
				this.headerLogo = headImg;
			}
			
			
		},
		methods:{
			inputFocus(){
				this.phoneCode = ''
			},
			clickBtn(){
			  if(this.footerBtnClass == 'blue-footer-btn'){
				  this.getPostVerCode()
			  }
			},
			getPostVer(){//获取验证码
				let params = {
					'mobile': this.phoneNum,//手机号
					'mid': this.typeFrom=='live'?this.$route.params.roomid:this.$route.params.id,//roomid  vid
					'type': this.typeFrom=='live'?'0':'1',//0 直播 1 回看
				};
				this.$http.post("/h5live/sms/sendSmsCode", this.$qs.stringify(params)).then(
					res => {
						
						if (res.data.code == "000000") {
							fun.toastMessage('短信验证码已发送')
						} else {
							console.log(res.data)
							fun.toastMessage(res.data.msg)
						}
					},
					err => {
						console.log(err);
					}
				);
			},
			getPostVerCode(){//验证验证码
				let params = {
					'mobile': this.phoneNum,//手机号
					'mid': this.typeFrom=='live'?this.$route.params.roomid:this.$route.params.id,//roomid  vid
					'type': this.typeFrom=='live'?'0':'1',//0 直播 1 回看
					'code':this.phoneCode,//验证码
				};
				this.$http.post("/h5live/sms/verifyCode", this.$qs.stringify(params)).then(
					res => {
						if (res.data.code == "000000") {
							this.$emit("formChildMsg", {
								type: "closeSmsVer",
								data: 'ruan'
							})
						} else {
							console.log(res.data)
							fun.toastMessage(res.data.msg)
						}
					},
					err => {
						console.log(err);
					}
				);
			},
			clickGetVer(){
				 let num = this.phoneNum
				 const reg = /^1[3456789]\d{9}$/;
				  if (!reg.test(num)) {
				    fun.toastMessage('请填入正确的手机号码')
				    return
				 }
				this.getPostVer()
				if(this.switchState){
					this.switchState = false;
					this.grayClass = 'gray-class';
					this.authcodetext ="获取验证码(60s)"
					this.clearTime = setInterval(this.setTime,1000)
				}
				 
			},
			//倒计时
			setTime(){
				this.time_s--;				
				//console.log(this.time_s)
				this.authcodetext =`获取验证码(${this.time_s}s)`
				if(this.time_s < 1){
					clearInterval(this.clearTime)
					this.time_s = 60;
					this.switchState = true
					this.grayClass =" "
					this.authcodetext ="获取验证码"
				}
			},
		}
	}
</script>

<style lang="less" scope>
	.gray-class{
		color: #999999 !important;
	}
	.blue-footer-btn{
		background-color: #307CFF !important;
	}
	::placeholder {
		color: #CECECE;
		font-size: 30px;
	}

	.sms-verification-box {
		width: 100vw;
		height: 628px;
		background: #FFFFFF;
		border-radius: 40px 40px 0px 0px;
		display: flex;
		flex-direction: column;
		align-items: center;

		header {
			width: 100vw;
			height: 105px;
			// background: salmon;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			img {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				margin: 0 6px 0 30px;
			}

			span {
				font-size: 26px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #27344C;
				line-height: 37px;
				letter-spacing: 1px;
			}
		}

		.content-box {
			width: 628px;
		    height: 300px;
			// background: salmon;

			ul {
				height: 300px;

				li {
					width: 100%;
					height: 80px;
					// background: sandybrown;
					border-bottom: 1px solid #EEEEEE;
					margin-top: 50px;

					input {
						height: 100%;
						padding-left: 15px;
						flex: 1;
						color: #27344C;
					}
				}

				.phone-num {
					display: flex;
				}

				.phone-ver {
					display: flex;
					justify-content: space-between;
					align-items: center;

					p {
						width: 200px;
						height: 80px;
						text-align: center;
						line-height: 80px;
						font-size: 26px;
						font-weight: 400;
						color: #307CFF;
					}
				}
			}

		}

		.footer-btn {
			width: 630px;
			height: 96px;
			background-color: #AAAFB9;
			border-radius: 48px;
			text-align: center;
			line-height: 96px;
			color: white;
		}
	}
</style>
